import React, { useEffect, useState } from 'react'
import { Box, AutoRollComponent, NoData } from '$components';
import { useFsRequest, ApiTable } from '$utils';
import moment from 'moment';
import { Tooltip } from 'antd';
import './style.less';

function CitySafty(props) {
    const { waterLevelAlarms } = props;

    // const { data: fireAlarms = [] } = useFsRequest({ url: ApiTable.getFireAlarmList });

    const { data: fgjvNoticeList = [] } = useFsRequest({ url: 'community/fgjv/notice' });

    // const getContent = () => {
    //     return <div className='_city_safty'>
    //         {fireAlarms.map(s => {
    //             const handled = s?.state == 2
    //             return <div className={handled ? 'alarm_handle' : 'alarm_unhandle'}>
    //                 <div className='handle_img' />
    //                 <div className='alarm_content'>
    //                     <div className='alarm_bg'>
    //                         <div className='alarm_title1'>{moment(s.createTime).format('YYYY-MM-DD HH:mm:ss')}</div>
    //                         <div className='alarm_title2' style={{ color: handled ? '#FFF' : '#24DCF7' }}>{handled ? '已处理' : '处理中'}</div>
    //                     </div>
    //                     <div className='alarm_text'>
    //                         <div>
    //                             <Tooltip title={s?.location}>
    //                                 <div className='alarm_title1'>事件地点: {s?.location?.length > 20 ? s?.location.substring(0, 20) + '...' : s?.location}</div>
    //                             </Tooltip>
    //                         </div>
    //                         <div className='alarm_title1'>警情类型: {s?.type}</div>
    //                     </div>
    //                 </div>
    //             </div>
    //         })}

    //     </div>
    // }

    // const renderList = () => <div className='_city_safty'>
    //     {
    //         waterLevelAlarms?.map(a => <div className={a.alarms[0]?.state >= 3 ? 'alarm_handle' : 'alarm_unhandle'}>
    //             <div className='handle_img' />
    //             <div className='alarm_content'>
    //                 <div className='alarm_bg'>
    //                     <Tooltip title={a.alarms[0]?.source?.name}>
    //                         <div className='alarm_title1'>{a.alarms[0]?.source?.name}</div>
    //                     </Tooltip>
    //                     <div className='alarm_title2' style={{ color: a.alarms[0]?.state >= 3 ? '#FFEA00' : '#FF2C2C' }}>{convertLevelToLabel(a.alarms[0]?.level)}</div>
    //                 </div>
    //                 <div className='alarm_text'>{a.alarms[0]?.content}</div>
    //             </div>
    //         </div>)
    //     }
    // </div>

    const renderFgjvList = () => <div className='_city_safty'>
        {
            fgjvNoticeList?.map(n => <div className={'notice_list'}>
                <div className='notice_img' />
                <div className='notice_content'>
                    <div className='alarm_bg'>
                        <Tooltip title={n.title}>
                            <div className='alarm_title1'>{n.title}</div>
                        </Tooltip>
                        <div
                            className='alarm_title2 pointer'
                            style={{ color: '#09D5FF' }}
                            onClick={() => { window.open(n.link) }}
                        >
                            去查看<img className='arrow' src='/assets/images/homepage/communtity/arrow_right.png' />
                        </div>
                    </div>
                    <div className='notice_text'>{n.detail}</div>
                </div>
            </div>)
        }
    </div>

    // const dataSource = fireAlarms.concat(waterLevelAlarms || [])

    const dataSource = fgjvNoticeList

    return <Box title={"政务信息查看"} >
        {
            dataSource?.length > 0 ? <AutoRollComponent
                canScroll={dataSource?.length > 2}
                content={<>
                    {/* {renderList()} */}
                    {/* {getContent()} */}
                    {renderFgjvList()}
                </>}
                divHeight={240}
                divId={`community-right-top`} />
                : <NoData height={240} />
        }
    </Box>
}

export default CitySafty;


function convertLevelToLabel(level) {
    switch (level) {
        case 1:
            return '一级预警';
        case 2:
            return '二级预警';
        case 3:
            return '三级预警';
        default:
            return '';
    }
}
